<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单选框</title>
    <link rel="stylesheet" href="magic-check.css">
</head>
<body>
    <h3>Checkbox</h3>

    <div>
        <input class="magic-checkbox" type="checkbox" name="layout" id="1">
        <label for="1">Normal</label>
    </div>

    <div>
        <input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
        <label for="2">Checked</label>
    </div>

    <div>
        <input class="magic-checkbox" type="checkbox" name="layout" id="3" disabled="disabled">
        <label for="3">
            Disabled
        </label>
    </div>

    <div>
        <input class="magic-checkbox" type="checkbox" name="layout" id="4" checked disabled="disabled">
        <label for="4">Checked && Disabled</label>
    </div>


    <h3>Radio</h3>

    <div>
        <input class="magic-radio" type="radio" name="radio" id="11">
        <label for="11">Normal</label>
    </div>

    <div>
        <input class="magic-radio" type="radio" name="radio" id="22" checked>
        <label for="22">Checked</label>
    </div>

    <div>
        <input class="magic-radio" type="radio" id="33" disabled="disabled">
        <label for="33">Disabled</label>
    </div>

    <div>
        <input class="magic-radio" type="radio" id="44" disabled="disabled" checked>
        <label for="44">Checked && Disabled</label>
    </div>
</body>
</html>